<!DOCTYPE html>
<html> 
<head>

    <meta charset="utf-8">
    <title>修改密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/reset.css'}" />
    <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/mobile/jquery.mobile-1.4.3.css'}" />
    <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/mobile/mobileCommon.css'}" />
    <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/mobile/mobile.css'}" />
    <script type="text/javascript" src="@{'/public/javascripts/jquery-2.0.js'}"></script>
    <script type="text/javascript" src="@{'/public/javascripts/jquery.mobile-1.4.3.js'}"></script>
    <script type="text/javascript" src="@{'/public/javascripts/mobileCommon.js'}"></script>
    <script type="text/javascript" src="@{'/public/javascripts/verification.js'}"></script>
    <style>
        .eye{
            position: absolute;
            display: block;
            top: 12px;
            right: 10px;
            width: 33px;
            height: 20px;
            background: url(/public/images/h5icon/eyes_closed.png) no-repeat center right #FFFFFF;
            background-size: 100%;
        }
        .row-width{
            width:100%;
            text-align: left;
        }
        .rel-pos{
            position: relative;
        }
        #submitbtn{
            background-color: darkred;
        }
        .mobile_login_shurk{ height: 45px; line-height: 28px; font-size: 15px; color: #969696; padding:0 0 0 5px;}


    </style>
</head>
<body>

<div data-role="page" >

        <div class="ui-field-contain">
            <input type="tel" id="mobilename" name="mobilename" class="mobile_login_shurk" maxlength="11" value="${user?.name}" placeholder="请输入您的手机号" >

            <div class="ui-grid-a">
                <li class="ui-block-a">
                    <input type="text" class="mobile_login_shurk" id="verifyCode" name="verifyCode"  placeholder="请输入您的验证码" >
                </li>
                <li class="ui-block-b">
                    <button id="btn_getVerifyCode">获取验证码</button>
                </li>
            </div>
            <div class="row-width rel-pos">
                <input type="password" class="mobile_login_shurk"  id="loginpwd" placeholder="重设密码"  maxlength="20" autocomplete="off" > <b class="eye"></b>
            </div>
            <div class="oa_er_bk" id="oa_er_bk">
                <div class="oa_error" id="oa_error">
                    <h3>错误提示</h3>
                    <p class="error_content" id="error_content"></p>
                    <button data-role="button" id="close" class="os_cf" onclick="closeErrorTips();">确定</button>
                </div>
            </div>
            <br>
            <a class="ui-btn ui-corner-all ui-shadow ui-btn-b"  id="submitbtn" type="submit"  disabled="disabled" >完成</a>

        </div>
</div>

</body>
<script>

    $(document).ready(function(){
        veriChangeVal("submitbtn","#verifyCode","#loginpwd","#mobilename");
    });

    $(".eye").click(
            function(){
                if( $("#loginpwd").attr("type")=="password"){
                    $(".eye").css("background","url(/public/images/h5icon/eyes_opened.png) no-repeat center right #FFFFFF");
                    $(".eye").css("background-size","100%");
                    $("#loginpwd").attr("type","text");
                }else
                if( $("#loginpwd").attr("type")=="text"){
                    $(".eye").css("background","url(/public/images/h5icon/eyes_closed.png) no-repeat center right #FFFFFF");
                    $(".eye").css("background-size","100%");
                    $("#loginpwd").attr("type","password");
                }
            }
    );



    $("#btn_getVerifyCode").on("click",function(){
        try{

            $("#btn_getVerifyCode").attr("disabled","disabled");
            $.ajax({
                type : "GET",
                url : "/mobile/verifyCode",
                data : {"mobile":$("#mobilename").val(),"type":"1"},
                success : function(data) {
                    if(0==data.error.code){
                        getValCodeTimeout(60,"btn_getVerifyCode");
                    }else{
                        $("#btn_getVerifyCode").removeAttr("disabled");
                        $("#oa_er_bk").show();
                        $("#error_content").text(data.error.msg);
                    }
                },
                error : function(XMLHttpRequest) {
                    $("#btn_getVerifyCode").removeAttr("disabled");
                    $("#oa_er_bk").show();
                    $("#error_content").text("网络错误，请稍后再试",XMLHttpRequest);
                }
            });
        }catch(err){
            showErr(err);
        }
    });

    $("#submitbtn").on("click",function(){
        var mobile = veriPhoneNumber($("#mobilename").val());
        if (mobile != true) {
            $("#oa_er_bk").show();
            $("#error_content").text(mobile);
            return;
        }


        var verifyCode = veriValCode($("#verifyCode").val());
        if (verifyCode != true) {
            $("#oa_er_bk").show();
            $("#error_content").text(verifyCode);
            return;
        }

        var password = veriPassword($("#loginpwd").val());
        if (password != true) {
            $("#oa_er_bk").show();
            $("#error_content").text(password);
            return;
        }


        try{
            $.ajax({
                type : "POST",
                url : "/mobile/me/modifypwd",
                data : {name:$("#mobilename").val(),
                    password:$("#loginpwd").val(),
                    verifyCode:$("#verifyCode").val()
                    },
                success : function(data) {
                    if(0==data.error.code){
                        alert("修改密码成功");
                        window.location.href="/mobile/content/moneyMatters"
                    }else{
                        $("#oa_er_bk").show();
                        $("#error_content").text(data.error.msg);
                    }
                },
                error : function(XMLHttpRequest) {
                    $("#oa_er_bk").show();
                    $("#error_content").text("网络错误，请稍后再试",XMLHttpRequest);
                }
            });
        }catch(err){
            showErr(err);
        }
    });
</script>
</html>